

body {
  background: #666;
  color: #f9f9f9;
  font: 1em 'Open sans', sans-serif;
}
#SAO-back {
  position: fixed;
  width: 100%;
  top:0;
  left:0;
  height: 100%;
  background: rgba(3, 3, 3, 0.3);
}
#SAO-menu {
  display: none;
  position: absolute;
  border: 1px solid;
  border-image: linear-gradient(to top, transparent, #f9f9f9 20%, #f9f9f9 80%, transparent) 0 0 0 1;
  margin-left: 30px;
  width: auto;
}

#SAO-menu:before {
  position: absolute;
  content: '';
  border-right: 25px solid #f9f9f9;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  left: -30px;
  top: calc(50% - 10px);
}

#SAO-menu:after {
  position: absolute;
  content: '';
  border: 3px solid #333;
  border-radius: 50%;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
}
#SAO-menu-content::-webkit-scrollbar {
  display: none
}

#SAO-menu-content {
  max-height: 300px;
  overflow: scroll;
  width:430px;
}

#menu-list {
  list-style-type: none;
  margin: 0 5px;
  padding: 0;
	width: auto;
}

.menu-list-item {
  background-color: rgba(249, 249, 249, 0.79);
  color: #494748;
  width: 150px;
  padding: 15px 25px;
  margin-bottom: 5px;
  font-weight: bolder;
  color: rgb(77, 72, 73);
  box-shadow: 3px 3px 2px #888888;
  height: 20px;
}



.menu-child {
  display: none;
  position: relative;
  border: 1px solid;
	left:170px;
  border-image: linear-gradient(to top, transparent, #f9f9f9 20%, #f9f9f9 80%, transparent) 0 0 0 1;
  margin-left: 20px;
  width: auto;
	height: auto;
	padding: 10px 30px;

}

.menu-child:before {
  position: absolute;
  content: '';
  border-right: 25px solid #f9f9f9;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  left: -30px;
  top: calc(50% - 10px);
}

.menu-child:after {
  position: absolute;
  content: '';
  border: 3px solid #333;
  border-radius: 50%;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
}
.menu-list-child {
  display: display;
  background-color: rgba(249, 249, 249, 0.79);
  color: #494748;
  width: 150px;
  padding: 15px 25px;
  margin-bottom: 5px;
  position: relative;
  left:-25px;
  top: 0px;
  font-weight: bolder;
  color: rgb(77, 72, 73);
	box-shadow: 3px 3px 2px #888888;
  height: 20px;
}

.menu-list-item:hover .menu-child {
  display: inline-block;
}
.menu-list-item .active {
  display: inline-block!important;
}
/* #SAO-menu-content:hover {
	width: 420px;
} */
.menu-list-item:last-child {
  margin-bottom: 0;
}

.menu-list-item:hover {
  cursor: pointer;
  background-color: #eda60c;
  color: #f9f9f9;
}

.menu-list-child:hover {
  cursor: pointer;
  background-color: #eda60c;
  color: #f9f9f9;
}
